<template>
	<view class="u-page">
		<u-navbar leftIconColor="#fff" bgColor="#000" :titleStyle="{color:'#fff'}" :title="$t('navbar.step2')" @leftClick="navigateBack" safeAreaInsetTop fixed placeholder>
			<view slot="right">
				<!-- <u-icon name="setting" :label="$t('language')"></u-icon> -->
				<view class="dianchi"></view>
			</view>
		</u-navbar>
		<view class="u-demo-block">

			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form :labelStyle="{'color':'#fff'}" labelPosition="left" :model="form" ref="form1" labelWidth="150rpx">
					<text class="u-demo-block__title color1">{{$t('add.setting')}}</text>
					<view class="card mt-30">
						<u-form-item :label="$t('detail.start')" prop="userInfo.name" borderBottom>
							<view class="w-full flex-row justify-end">
								<u-switch :activeColor="activeColor" v-model="form.start" size="20"></u-switch>
							</view>
						</u-form-item>
						<u-form-item labelPosition="top" :label="$t('add.strength')" borderBottom>
							<view class="w-full">
								<u-slider activeColor="#f9ae3d" showValue min="1" max="10" v-model="form.strength"></u-slider>
							</view>
						</u-form-item>
						<u-form-item :label="$t('detail.time1')" @click="e => selectPicker(1,e)" borderBottom>
							<u--input inputAlign="right" type="number" v-model="form.value1"
								:placeholder="$t('add.p1')" border="none"></u--input>
							<view slot="right" name="arrow-right" class="ml-10">分钟</view>
						</u-form-item>
						<u-form-item :label="$t('detail.time2')" @click="e => selectPicker(2,e)" borderBottom>
							<u--input inputAlign="right" type="number" v-model="form.value2"
								:placeholder="$t('add.p2')" border="none"></u--input>
							<view slot="right" name="arrow-right" class="ml-10">分钟</view>
						</u-form-item>
						<u-form-item :label="$t('detail.time3')" @click="e => selectPicker(3,e)" borderBottom>
							<u--input inputAlign="right" type="number" v-model="form.value3"
								:placeholder="$t('add.p2')" border="none"></u--input>
							<view slot="right" name="arrow-right" class="ml-10">分钟</view>
						</u-form-item>
						
						<u-form-item :label="$t('detail.lighting')" prop="lighting">
							<view class="w-full flex-row justify-end">
								<u-switch :activeColor="activeColor" v-model="form.lighting" size="20"></u-switch>
							</view>
						</u-form-item>
					</view>
					<text class="u-demo-block__title color1 mt-30">{{$t('detail.make')}}</text>
					<view class="card mt-30">
						<u-form-item :label="$t('detail.standard')" prop="make" borderBottom>
							<view class="w-full flex-row justify-end">
								<u-switch :activeColor="activeColor" v-model="form.make" size="20"></u-switch>
							</view>
						</u-form-item>
						<u-form-item :label="$t('detail.add1')" prop="make1">
							<view class="w-full flex-row justify-end">
								<u-switch :activeColor="activeColor" v-model="form.make1" size="20"></u-switch>
							</view>
						</u-form-item>
					</view>
					<view @click="add" class="mt-30" style="margin-top: 60rpx;">
						<u-button type="warning" :text="$t('detail.add')"></u-button>
					</view>
				</u--form>
				
				<u-picker :cancelText="$t('add.close')" :confirmText="$t('add.confirm')" :show="pickerShow"
					:columns="pickerColumns" @confirm="pickerConfirm"></u-picker>
			
				<u-datetime-picker :show="showBirthday" :value="value4" mode="time" closeOnClickOverlay
					@confirm="birthdayConfirm" @cancel="birthdayClose" @close="birthdayClose"></u-datetime-picker>

			</view>
		</view>
		<!-- <view class="submit" @click="up">{{$t('up')}}</view> -->
		<u-action-sheet :actions="actionList" :title="actionTitle" @select="actionSelect" :show="actionShow"
			@close="actionClose"></u-action-sheet>
	</view>
</template>

<script>
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				pickerShow: false,
				pickerColumns: [],
				columns1: [],
				columns2: [],
				columns3: [],
				
				fileList1: [],
				disabled1: false,
				tips: '',
				value: '',
				value4: '05:28',
				showCalendar: false,
				showBirthday: false,
				form: {
					start: "",
					strength: 1,
					value1: "",
					value2: "",
					value3:"",
					make:"",
					make1:"",
					lighting: "",
				},
				model1: {
					userInfo: {
						name: '10',
						sex: '',
						birthday: '05:28',
					},
				},
				showSex: false,
				birthday: Number(new Date()),
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {}
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		onLoad() {
			for (var i = 1; i <= 10; i++) {
				this.columns1.push(0.5 * i)
			}
			for (var i = 1; i <= 30; i++) {
				this.columns2.push(1 * i)
			}
			for (var i = 1; i <= 8; i++) {
				this.columns3.push(0.5 * i)
			}
		
		},
		methods: {
			add() {
				uni.navigateTo({
					url:'/pages/home/add'
				})
			},
			selectPicker(type, e) {
				switch (type) {
					case 1:
						this.pickerColumns = [this.columns1]
						break;
					case 2:
						this.pickerColumns = [this.columns2]
						break;
					case 3:
					console.log('aaaa');
						this.pickerColumns = [this.columns3]
						break;
				}
				console.log(this.pickerColumns);
				this.type = type
				this.pickerShow = true
			},
			pickerConfirm(e) {
				console.log(e);
				switch (this.type) {
					case 1:
						this.form.value1 = e.value[0]
						break;
					case 2:
						this.form.value2 = e.value[0]
						break;
					case 3:
						this.form.value3 = e.value[0]
						break;
				}
				this.pickerShow = false
			},
			up() {
				uni.navigateBack({
					delta: 1
				})
			},

			navigateBack() {
				uni.navigateBack()
			},
			change(e) {
				// console.log(e);
			},
			birthdayClose() {
				this.showBirthday = false
				this.$refs.form1.validateField('userInfo.birthday')
			},
			birthdayConfirm(e) {
				console.log('eee', e);
				this.showBirthday = false
				this.model1.userInfo.birthday = e.value
				this.$refs.form1.validateField('userInfo.birthday')
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	}
</script>

<style lang="scss">
	/deep/uni-slider {
		margin: 0;
	}

	.dianchi {
		background: url('') no-repeat;
		background-size: 100% 100%;
		height: 55rpx;
		width: 75rpx;
		position: relative;
		display: flex;
	}

	.dianchi::after {
		content: '';
		background-color: #fff;
		position: absolute;
		top: 20rpx;
		left: 10rpx;
		width: 30rpx;
		height: 15rpx;
	}
</style>